{extend name="common/layout" /}
{block name="style"}
<style>
    .media .media-body .media-heading {
    }

    .media .media-body p {
        line-height: 2em;
    }

    .item {
        float: left;
    }

    .price {
        display: inline-block;
        margin-right: 10px;
    }

    .item .thumbnail:hover {
        border: 1px solid #ccc;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6);
        box-sizing: border-box;
    }

    .search-screen {
        margin-bottom: 20px;
        list-style: none;
        background-color: #fff;
        border-radius: 4px;
    }

    .search-screen {
        padding-top: 13px;
    }

    .search-screen-selected {
        background-color: #F4645F;
    }

    .search-screen-selected a {
        color: #fff;
    }

    .search-screen-lable {
        font-weight: bold;
        text-align: right;
    }

    .search-screen ul li, .search-screen-lable {
        padding: 5px 10px;
    }
</style>
{/block}
{block name="main"}
<div class="container content-wrap">
    <div class="row">
        <main class="col-md-12 main-content">
            <ol class="breadcrumb crumb">
                <li><a href="/">首页</a></li>
                <li class="active">{$title}</li>
            </ol>

            <div class="search-screen">
                {volist name="screenList" id="vo"}
                <div class="row">
                    <span class="col-md-1 col-xs-2 search-screen-lable">{$vo['name']}:</span>
                    <ul class="col-md-11 col-xs-10 list-inline">
                        {volist name="vo['screen']" id="v"}
                        <li {if $v['value']==$price}class="search-screen-selected"{/if}>
                        <a href="/shopping.html?price={$v['value']}&page=1">{$v['label']}</a></li>
                        {/volist}
                    </ul>
                </div>
                {/volist}
            </div>

            <div class="row masonry wall">
                {if count($list) > 0}
                {volist name="list" id="vo"}
                <div class="col-xs-6 col-md-3 item">
                    <a href="{:url('@index/shopping/item', 'id='.$vo.id)}" style="display:inline-block;">
                        <div class="thumbnail">
                            <img src="{$vo.pict_url}" alt="{$vo.title}" class="lazy">
                            <div class="caption">
                                <h3 class="price">￥{$vo.zk_final_price}</h3>
                                {if $vo.zk_final_price < $vo.reserve_price}
                                <del>￥{$vo.reserve_price}</del>
                                {/if}
                                <p>{$vo.title}</p>
                            </div>
                        </div>
                    </a>
                </div>
                {/volist}
                {else}
                <div class="col-md-12">
                    <center style="height: 100px; line-height: 100px; font-size: 2em;background-color: #fff;">未找到
                    </center>
                </div>
                {/if}
            </div>


            {if $page}
            <nav aria-label="">
                {$page}
            </nav>
            {/if}

        </main>

    </div>
</div>

{/block}
